<template>
    <div class="treeItem" :class="{'active' : store.tree.active == item.id}" @click="setActive">
        <iconView :colorType="item.type" />{{item.title || item.url}}
    </div>
</template>
<script setup>
import iconView from '../iconTag.vue'
import { inject, ref, watch } from 'vue'
const props = defineProps(['item']);
import { useStore } from '../../libs/store'
const store = useStore();
const setActive = function () {
    store.setTreeActive(props.item);
};



</script>
<style lang="less" scoped>
.treeItem {
    padding:7px 5px;
    margin-bottom: 5px;
    border-radius: 3px;
    color : #888;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color .1s;
}

.treeItem:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.treeItem.active {
    background-color: rgba(255, 255, 255, 0.9);
    color : #444;
}
</style>